User Guides > PCC with Legacy Services (Proxy Server) > Integrating with Your Application > Configuring HTML5 Samples > Adding Code for an HTML5 Project |
The HTML5 Prizm Content Connect sample demonstrates the use of a JavaScript component, pccViewer, which communicates with a web service using a RESTful scheme as noted in the RESTful Web API topic. To add the html5 viewer, the following script files are required to be added for the web page:
Along with a script (similar to the following) tying a desired document to be viewed to the pccViewer control object:
CS.NET Example |
Copy Code
|
---|---|
: <script type="text/javascript"> var documentName1 = '<%=document%>' $(document).ready(function () { var pluginOptions1 = { documentID: documentName1, toolboxMenuOpen: false, annotationID: 'Annotation Filename', uiElements: { toolTips: true, fullScreenToggle: true, firstLastPage: false} } $("#imageGearPageView").pccViewer(pluginOptions1); }); </script> |
The pluginOptions1 description can be found in the HTML5 Viewer topic.
The imageGearPageView object is named div object where the viewer will be anchored:
CS.NET Example |
Copy Code
|
---|---|
: <div id="imageGearViewer"> <div id="imageGearPageView"> </div> </div> |
To set up the service web environment, either a traditional web.config file can be used or a more generic .xml file like the prizmconfig.xml used in the HTML5 sample. The prizmconfig.xml contains named tags or elements which specify where documents are obtained, where intermediate images are cached and where the imaging services, the proxyserver, can be located for its image rendering services.
XML Element |
Content |
Purpose |
EnableDocumentPath | True or False | When set to True, this parameter restricts the web tier samples to load documents from the path specified by DocumentPath. Otherwise, it allows loading documents from any path. |
DocumentPath
|
%ALLUSERSPROFILE%\Accusoft\Prizm\Documents |
Location of document folder for displaying document images. |
TempcachePath |
%ALLUSERSPROFILE%\Accusoft\Prizm\Cache |
Location where the proxyserver will deposit rendered images. The parameter contained within the percentage symbols, ALLUSERSPROFILE, is an environmental parameter denoting the default base path for reading and writing access. |
MarkupsPath |
%ALLUSERSPROFILE%\Accusoft\Prizm\Markups |
Location where named annotation files are stored and retrieved. |
WebServiceScheme |
http |
Communication protocol to the proxyserver. |
WebServiceHost |
localhost |
Domain or host of the proxyserver. |
WebServicePort |
18660 |
Port number for proxyserver. |
These elements can be changed or added to suit the environment needed by the deployed prizm application. In the HTML5 sample, the PccConfig code file is used to parse these tags and provide a property interface for each xml element.
The PccConfig code file has a static method, LoadConfig, which can be used like the following code snippet to obtain the environmental parameters to execute the web tier service of the application. The call should be made early in the web application page using the prizm services.
Example |
Copy Code
|
---|---|
<body> : <% // Environmental Setup PccConfig.LoadConfig("prizmconfig.xml"); %> : </body> |
The other code file pieces needed have to do with supporting the pccViewer RESTful communication scheme to the service side Web tier and onto the proxyserver image rendering service.
File |
Description |
App_Code Folder |
Contains the supporting classes for environmental configuration and the RESTful communication scheme between the pccViewer and web tier service. While the code body for the classes can be modified as needed, the APIs modifications need careful care if changed. See PCC.ashx. |
PccViewerServices | Assembly shared for both vb and c# samples. Source is in a separate directory and moves the communication backend between the web tier and imaging services (proxy server) into its own namespace and class objects. See the PccViewerServices topic section for details. |
Js folder |
Contains the required Javascript files making up the pccViewer entity. |
Images folder |
Graphics for pccViewer. |
Css folder |
Web style sheet for the pccViewer. |
Default.aspx |
The default web starting page. The pccViewer would typically reside on this page. |
PCC.ashx |
File which defines and links the required prizm RESTful interface to the files in the App_Code folder. The client side pccViewer Javascript object will use this RESTful interface as described in RESTful Web API. File is required for the functionality of the IIS ASP.NET environment. |
Prizmconfig.xml |
Contains modifiable parameter content locations for documents, cache folder and proxyserver connection. |
Web.config |
Contains IIS and web tier settings. |
Sample.doc |
For the HTML5 sample, the test document used to illustrate the functional prizm content connect product. |
With all these pieces, a web application page can be put together using a query parameter to pass in the document to be viewed. The following HTML5 sample illustrates a simple web Default.aspx application solution using the document parameter for the query string to get the document to view:
CS.NET Example |
Copy Code
|
---|---|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>PCC HTML5 Sample</title> <link rel="icon" href="favicon.ico" type="image/x-icon" /> <link href="Default.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script> <script src="js/pccViewer.js" type="text/javascript"></script> </head> <body> <form id="Form1" runat="server"> <div id="confidentialNotice"><p>Content Connect Sample</p> </div> <% // Environmental Setup PccConfig.LoadConfig("prizmconfig.xml"); string document; document = Request.QueryString["document"]; if (document == null) { Response.Write("You must include the name of a document in the URL.<br/>"); Response.Write("For example, click on this link: <a href=\"Default.aspx?document=sample.doc\">Default.aspx?document=sample.doc</a>"); return; } string documentLocation = PccConfig.DocumentFolder; string tempLocation = PccConfig.TempFolder; string originalDocument = System.IO.Path.Combine(documentLocation, document); %> <script type="text/javascript"> var documentName1 = '<%=document%>' $(document).ready(function () { var pluginOptions1 = { documentID: documentName1, toolboxMenuOpen: false, annotationID: 'Annotation Filename', uiElements: { toolTips: true, fullScreenToggle: true, firstLastPage: false } } $("#imageGearPageView").pccViewer(pluginOptions1); }); </script> <div id="imageGearViewer"> <div id="imageGearPageView"> </div> </div> </form> </body> </html> |